<template>
    <div>
        <div class="search-term">
            <el-form :model="searchInfo" label-position="right" ref="titleForm" label-width="60px">
                <el-form-item label="标签">
                    <el-tag
                            style="margin-left: 10px;"
                            :key="tag"
                            v-for="tag in formData.dynamicTags"
                            closable
                            :disable-transitions="false"
                            @close="handleClose(tag)">
                        {{tag}}
                    </el-tag>
                    <el-select v-model="value" filterable placeholder="请选择标签" :change="handleSelected()"
                               style="margin-left: 10px;">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="关键词">
                    <!--                    <el-input placeholder="标题联想词提示;标题、内容全文检索；支持回车检索" v-model="searchInfo.title"-->
                    <!--                              style="margin-left: 10px;width:600px" @keyup.enter.native="onSubmit">-->
                    <!--                        <i slot="prefix" class="el-input__icon el-icon-search"></i>-->
                    <!--                    </el-input>-->
                    <el-autocomplete
                            class="inline-input"
                            style="width: 60%;margin-left: 10px"
                            v-model="searchInfo.title"
                            :fetch-suggestions="querySearch"
                            placeholder="请输入内容"
                            :trigger-on-focus="false"
                            @keyup.enter.native="onSubmit"
                            @select="handleSelect"
                    ></el-autocomplete>
                    <el-button @click="onSubmit" icon="el-icon-search" type="primary" style="margin-left: 10px">查询
                    </el-button>
                </el-form-item>

            </el-form>
        </div>
        <el-table
                :data="tableData"
                @selection-change="handleSelectionChange"
                border
                ref="multipleTable"
                stripe
                style="width: 100%"
                tooltip-effect="dark"
        >
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form class="demo-table-expand">
                        <el-form-item label="标题" style="width:100%">
                            <!--                            <div v-if="props.row.highlight.title " v-html="props.row.highlight.title[0]"></div>-->
                            <div>{{ props.row.title }}</div>
                        </el-form-item>
                        <el-form-item label="标签">
                            <span>{{ props.row.tags }}</span>
                        </el-form-item>
                        <el-form-item label="内容" style="width:100%;">
                            <!--                            <div v-if="props.row.highlight.content " v-html="props.row.highlight.content[0]"></div>-->
                            <div>{{props.row.content }}</div>
                        </el-form-item>
                        <el-form-item label="状态">
                            <span>{{ props.row.status }}</span>
                        </el-form-item>
                        <el-form-item label="作者">
                            <span>{{ props.row.author }}</span>
                        </el-form-item>
                        <el-form-item label="发布">
                            <span>{{props.row.create_time|formatDate}}</span>
                        </el-form-item>
                        <el-form-item label="更新">
                            <span>{{props.row.update_time|formatDate}}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column label="标题" :show-overflow-tooltip="overflow" prop="title" width="300"></el-table-column>

            <el-table-column label="内容" :show-overflow-tooltip="overflow" prop="content" width="500"></el-table-column>
            <el-table-column label="状态" :show-overflow-tooltip="overflow" prop="status" width="60"></el-table-column>

            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            @click="view(scope.row)"
                            icon="el-icon-view"
                            size="small"
                            type="success"
                    >预览
                    </el-button>
                    <el-button class="table-button" @click="updateSysKnowledge(scope.row)" size="small" type="primary"
                               icon="el-icon-edit">变更
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
                :current-page="page"
                :page-size="pageSize"
                :page-sizes="[10, 30, 50, 100]"
                :style="{float:'right',padding:'20px'}"
                :total="total"
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>

    </div>
</template>

<script>

    import {formatTimeToStr} from "@/utils/date";
    import infoList from "@/mixins/infoList";
    import {getSysKnowledgeList, querySuggestByTitle} from "../../api/sys_knowledge";
    import {getSysTags} from "../../api/sys_tag";

    // pdf 导出
    import html2canvas from 'html2canvas';
    import jsPDF from "jspdf";

    export default {
        name: "SysKnowledgeQuery",
        mixins: [infoList],
        data() {
            return {
                listApi: getSysKnowledgeList,
                dialogFormVisible: false,
                type: "",
                deleteVisible: false,
                options: [],
                overflow: true,
                multipleSelection: [],
                value: '',
                formData: {
                    tagName: "",
                    tagStatus: "",
                    tagAuthor: "",
                    dynamicTags: [],

                }
            };
        },
        filters: {
            formatDate: function (time) {
                if (time != null && time != "") {
                    var date = new Date(time);
                    return formatTimeToStr(date, "yyyy-MM-dd hh:mm:ss");
                } else {
                    return "";
                }
            },
            formatBoolean: function (bool) {
                if (bool != null) {
                    return bool ? "是" : "否";
                } else {
                    return "";
                }
            }
        },
        methods: {

            //条件搜索前端看此方法
            onSubmit() {
                this.page = 1
                this.pageSize = 10
                this.searchInfo.tags = []
                let _this = this
                this.formData.dynamicTags.forEach(function (element) {
                    if (_this.searchInfo.tags == "") {
                        _this.searchInfo.tags = element
                    } else {
                        _this.searchInfo.tags = _this.searchInfo.tags + "," + element
                    }

                });

                this.getTableData()
            },
            handleSelectionChange(val) {
                this.multipleSelection = val
            },
            closeDialog() {
                this.dialogFormVisible = false;
                this.formData = {
                    tagName: "",
                    tagStatus: "",
                    tagAuthor: "",

                };
            },
            // 关闭标签时触发
            handleClose(tag) {
                this.formData.dynamicTags.splice(this.formData.dynamicTags.indexOf(tag), 1);
                this.$refs.titleForm.validateField('dynamicTags')
            },
            // 选择标签时触发
            handleSelected() {
                if (this.value) {
                    if (this.formData.dynamicTags.indexOf(this.value) > -1) {
                        this.$message({
                            type: 'warning',
                            message: '您选择的标签已存在，请重新选择'
                        })
                    } else {
                        this.formData.dynamicTags.push(this.value);
                    }
                    this.$refs.titleForm.validateField('dynamicTags')
                }
                this.value = '';
            },
            // 初始化标签数据
            async initSysTags() {
                const res = await getSysTags();
                if (res.code == 0) {
                    let this_ = this
                    res.data.list.forEach(function (element) {
                        this_.options.push({
                            value: element.tagName,
                            label: element.tagName
                        })
                    });
                } else {
                    console.log("查询异常")
                }
            },
            async querySearch(queryString, cb) {
                const res = await querySuggestByTitle({title: this.searchInfo.title});
                if (res.code == 0) {
                    let values = []
                    res.data.list.forEach(function (element) {
                        values.push({
                            value: element,
                        })
                    });
                    cb(values)

                } else {
                    cb(["asdfasdf"])
                }
            },
            handleSelect() {
                this.onSubmit()
            },
            // 更新文章
            updateSysKnowledge(row) {
                this.$router.push({
                    name: "knowledge",
                    params: {
                        row: row
                    }
                })
            },
            // 预览文章
            view(row) {
                this.$router.push({
                    name: "view",
                    params: {
                        row: row,
                        mode: "wysiwyg"
                    }
                })
            }
        },
        async created() {
            await this.getTableData();
            this.initSysTags()

        }
    };
</script>

<style>
    .demo-table-expand {
        font-size: 0;
    }

    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }

    .demo-table-expand .el-form-item {
        margin-left: 0;
        margin-bottom: 0;
        width: 50%;
    }
</style>
